@charset "UTF-8";
.mid-logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    margin: auto;
    width: 112px;
    height: 22px;
    background: url(https://js.ibaotu.com/son/images/recharge/com/logo_nobeta.png);
    -webkit-background-size: cover;
    background-size: cover
}

.container-fluid.body-contains {
    padding: 0
}

.body-contains.per .header-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    background-image: url(//js.ibaotu.com/son/images/recharge/per/rechar_per_banner.png)
}

.body-contains.per .header-wrap:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4)
}

.body-contains.per .header-wrap .header {
    position: absolute;
    z-index: 1;
    background: 0 0
}

.body-contains.per .header-wrap .header > p > span {
    margin-right: 30px;
    letter-spacing: 1px
}

.per .cards-wrap {
    overflow: unset;
    width: 956px;
    height: 160px;
    margin: 70px auto 36px
}

.per .cards-wrap .icon-selected {
    display: none;
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 36px;
    height: 36px;
    background: url(//js.ibaotu.com/son/images/recharge/per/icon_selected.png);
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.per .cards-wrap .nav-card {
    position: relative;
    width: 262px;
    height: 160px;
    margin: 0 25px;
    color: #333443;
    border: 1px solid #c8c8d0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #fff
}

.per .cards-wrap .nav-card:after {
    display: none;
    position: absolute;
    left: -2px;
    top: -2px;
    content: '';
    z-index: -1;
    background: #c58e45;
    width: 264px;
    height: 162px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.per .cards-wrap .nav-card:first-of-type {
    margin: 0 25px
}

.per .cards-wrap .nav-card.recommend {
    width: 282px
}

.per .cards-wrap .nav-card.recommend:after {
    width: 284px
}

.per .cards-wrap .nav-card.recommend:before {
    width: 50px;
    height: 24px;
    left: 0px;
    top: 0px;
    content: '推荐';
    color: #fff;
    text-align: center;
    line-height: 24px;
    font-size: 13px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #35D269;
}
.per .cards-wrap .nav-card.this-card {
    border:2px solid #FF28A0;
}

.per .cards-wrap .nav-card.this-card .icon-selected {
    display: block
}

.per .cards-wrap .nav-card.this-card .price-wrap {
    color: #FF28A0
}

.per .cards-wrap .nav-card.this-card .price-wrap .price {
    color: #FF28A0
}

.per .cards-wrap .nav-card.this-card .price-wrap .price:before {
    color: #FF28A0
}

.per .cards-wrap .nav-card.this-card:after {
    display: block
}
.per .cards-wrap .nav-card > p:first-of-type {
    line-height: 18px;
    font-size: 18px;
    font-weight: 700
}

.per .cards-wrap .nav-card .line {
    display: block;
    width: 100px;
    height: 2px;
    margin: 11px auto 10px;
    background: #ececf0;
    -webkit-border-radius: 1px;
    border-radius: 1px
}

.per .cards-wrap .nav-card .price-wrap {
    height: 50px;
    color: #8d8d96;
    font-size: 15px;
    margin-bottom: 11px
}

.per .cards-wrap .nav-card .price-wrap .price {
    position: relative;
    line-height: 50px;
    font-size: 50px;
    color: #333443
}

.per .cards-wrap .nav-card .price-wrap .price:before {
    position: absolute;
    left: -11px;
    top: 10px;
    content: '¥';
    height: 14px;
    line-height: 14px;
    font-size: 14px
}

.per .payfor-box.payfor-box > p:first-of-type {
    line-height: 14px;
    font-size: 14px;
    color: #333443
}

.per .payfor-box.payfor-box > p:first-of-type > span {
    position: relative;
    left: -3px;
    font-size: 20px;
    color: #FF28A0
}

.per .agree-rule {
    margin-bottom: 80px
}

.recharge-result {
    text-align: center
}

.recharge-result .icon-success {
    display: block;
    width: 180px;
    height: 183px;
    margin: 110px auto 20px;
    background: url(//js.ibaotu.com/son/images/recharge/per/icon_ok.png) no-repeat
}

.recharge-result .icon-fail {
    display: block;
    width: 150px;
    height: 203px;
    margin: 110px auto 20px;
    background: url(//js.ibaotu.com/son/images/recharge/per/icon_fail.png) no-repeat
}

.recharge-result > p {
    width: 306px;
    margin: 0 auto;
    line-height: 28px;
    font-size: 16px;
    color: #666
}

.recharge-result .btn-wrap {
    width: 340px;
    height: 40px;
    margin: 34px auto 207px
}

.recharge-result .btn-wrap a {
    float: left;
    width: 160px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.recharge-result .btn-wrap a.try-again, .recharge-result .btn-wrap a.view-rech-records {
    background: #c58e45;
    background: -moz-linear-gradient(left, #c58e45 0, #976727 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0, #c58e45), color-stop(100%, #976727));
    background: -webkit-linear-gradient(left, #c58e45 0, #976727 100%);
    background: -o-linear-gradient(left, #c58e45 0, #976727 100%);
    background: -ms-linear-gradient(left, #c58e45 0, #976727 100%);
    background: -webkit-gradient(linear, left top, right top, from(#c58e45), to(#976727));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #c58e45), to(#976727));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #c58e45), to(#976727));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #c58e45), to(#976727));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #c58e45), to(#976727));
    background: linear-gradient(to right, #c58e45 0, #976727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#C58E45, endColorstr=#976727);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#C58E45, endColorstr=#976727)"
}

.recharge-result .btn-wrap a.try-again {
    float: none;
    display: block;
    margin: 0 auto
}

.recharge-result .btn-wrap a.back-home {
    margin-left: 20px;
    border: 1px solid #c58e45;
    color: #c58e45
}

.recharge-result .btn-wrap a.back-home:hover {
    background: #c58e45;
    color: #fff
}

.body-contains .header {
    overflow: hidden;
    width: 100%;
    height: 160px;
    text-align: center;
    color: #fff;
    background: url(https://js.ibaotu.com/son/images/recharge/com/com_banner.png) right 0 no-repeat;
    -webkit-background-size: cover;
    background-size: cover
}

.body-contains .header h2 {
    line-height: 40px;
    font-size: 40px;
    font-weight: 400;
    margin: 41px 0 27px;
    letter-spacing: 2px
}

.body-contains .header > p {
    line-height: 16px;
    font-size: 16px
}

.body-contains .header > p > span {
    margin-right: 15px
}

.cards-wrap {
    overflow: hidden;
    width: 888px;
    margin: 84px auto 57px
}

.recharge-con .nav-card {
    position: relative;
    float: left;
    width: 200px;
    height: 144px;
    margin-left: 108px;
    padding-top: 23px;
    text-align: center;
    color: #b2b1b1;
    border: 1px solid #b2b1b1
}

.recharge-con .nav-card:first-of-type {
    margin: 0
}

.recharge-con .nav-card > p:first-of-type {
    line-height: 16px;
    font-size: 16px
}

.recharge-con .nav-card > p:last-of-type {
    line-height: 14px;
    font-size: 14px
}

.recharge-con .nav-card.recommend::before {
    position: absolute;
    left: -1px;
    top: 0;
    content: '';
    width: 37px;
    height: 36px;
    background: url(https://js.ibaotu.com/son/images/recharge/com/icon_recommend.png);
    -webkit-background-size: cover;
    background-size: cover
}

.recharge-con .nav-card.this-card::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    content: '';
    width: 35px;
    height: 33px;
    background: url(https://js.ibaotu.com/son/images/recharge/com/icon_selected.png);
    -webkit-background-size: cover;
    background-size: cover
}

.recharge-con .nav-card .price {
    height: 24px;
    line-height: 25px;
    margin: 14px 0 16px;
    font-size: 14px
}

.recharge-con .nav-card .price > span {
    font-size: 30px;
    margin-left: 3px;
    color: #d9b389
}

.payfor-box {
    width: 888px;
    height: 300px;
    margin: 0 auto;
    text-align: center
}

.payfor-box > p:first-of-type {
    line-height: 16px;
    font-size: 16px;
    color: #999
}

.payfor-box > p:first-of-type > span {
    color: #d9b389;
    margin-right: 3px
}

.payfor-box .payfor-way {
    width: 160px;
    height: 160px;
    margin-top: 36px;
    text-align: center;
    line-height: 160px
}

.payfor-box .way-wx {
    border: 1px solid #4aaf1a;
    float: left;
    margin-left: 220px
}

.pay_weixin_qrcode {
    width: 117px;
    height: 117px;
    margin: 22px auto
}

.payfor-way img {
    vertical-align: middle
}

.pay_weixin_qrcode > img {
    width: 117px;
    height: 117px
}

.payfor-way figcaption {
    width: 100%;
    height: 30px;
    margin: 0;
    float: left;
    line-height: 30px;
    font-size: 18px;
    letter-spacing: 3px;
    padding-top: 10px
}

.way-wx .icon-go {
    display: inline-block;
    width: 28px;
    height: 26px;
    background: url(//js.ibaotu.com/revision/img/icon-go.png);
    vertical-align: -8px
}

.payfor-box .way-zfb {
    border: 1px solid #02aaef;
    float: right;
    margin-right: 220px;
    cursor: pointer
}

.way-zfb figcaption {
    background: #02aaef;
    color: #fff;
    line-height: 30px;
    padding-top: 0;
    margin-top: 10px;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px
}

.agree-rule {
    text-align: center;
    line-height: 12px;
    font-size: 12px;
    margin-bottom: 34px;
    margin-top: 22px;
    color: #999
}

.vip-rule {
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc
}

/*企业支付页套餐增加为4个*/
.com-recharge .cards-wraps{
    width: 1000px;
}

.recharge-con .nav-cards{
    margin-left: 66px;
}